<template>
  <div class="treebox">
    <div class="container_top">
      <el-card class="box-card">
        <el-button
          type="primary"
          icon="el-icon-plus"
          @click="addchildnode"
        >添加子节点</el-button>
        <el-button
          plain
          icon="el-icon-plus"
          @click="topnodeshow = true"
        >添加顶部节点</el-button>
        <el-button
          plain
          icon="el-icon-delete-solid"
          @click="batchdeletion"
        >批量删除</el-button>
        <el-dropdown
          size="medium"
          split-button
          type="primary"
          style="margin-left: 10px;"
          @command="clickcommand"
        >
          更多操作
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item
              v-for="(item, index) in options"
              :key="index"
              :command="item"
            >
              {{ item.label }}
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </el-card>
    </div>
    <el-row class="rowbox">
      <el-col :span="6">
        <div class="grid-content bg-purple bottom_left">
          <el-card class="box-card">
            <div class="titlebg">
              <div style="color:#1E90FF;font-size:19px">
                <i class="el-icon-warning" />
              </div>
              <div class="text">
                当前选择编辑:
                <span
                  v-if="ruleForm.name != ''"
                  style="color:#40a9ff;font-weight:600;"
                >{{ ruleForm.name }}</span>
                <span
                  v-if="ruleForm.name != ''"
                  style="color:#2d8cf0;margin-left:10px"
                  @click="cancle"
                >取消选择</span>
              </div>
            </div>
            <div class="search">
              <el-input v-model="searchinput" placeholder="输入菜单名搜索">
                <i slot="suffix" class="el-input__icon el-icon-zoom-out" />
              </el-input>
            </div>
            <div class="tree">
              <el-tree
                ref="mytree"
                v-loading="treeloading"
                :data="treeData"
                node-key="id"
                :props="defaultProps"
                show-checkbox
                :default-expand-all="defaultall"
                :check-strictly="false"
                @check="
                  (click, checked) => {
                    handleCheckChange(handleCheckChange, checked)
                  }
                "
                @node-click="handleNodeClick"
              />
            </div>
          </el-card>
        </div>
      </el-col>
      <el-col :span="18">
        <div class="grid-content bg-purple-light">
          <div class="formbox">
            <div>
              <el-form
                ref="ruleForm"
                :model="ruleForm"
                :rules="rules"
                label-width="100px"
                class="demo-ruleForm"
              >
                <el-form-item
                  v-if="upperlevelmenu"
                  label="上级菜单"
                  prop="uppermenu"
                >
                  <el-input
                    v-model="ruleForm.uppermenu"
                    placeholder="请选择上级菜单"
                    style="width:520px"
                    disabled
                  />
                  <el-popover
                    placement="right"
                    width="400"
                    trigger="click"
                    style="margin-left:10px"
                  >
                    <el-tree
                      ref="tree"
                      check-on-click-node
                      :data="treeData"
                      node-key="id"
                      :props="defaultProps"
                      :default-expand-all="defaultall"
                      @node-click="popoverchlick"
                    />
                    <el-button
                      slot="reference"
                      icon="el-icon-tickets"
                      :disabled="haschirld === false"
                    >选择菜单</el-button>
                  </el-popover>
                </el-form-item>
                <el-form-item label="名称" prop="name">
                  <el-input
                    v-model="ruleForm.name"
                    placeholder="请输入名称"
                    style="width:550px"
                  />
                </el-form-item>
                <el-form-item label="路径" prop="path">
                  <el-input
                    v-model="ruleForm.path"
                    placeholder="请输入路径"
                    style="width:550px"
                  />
                </el-form-item>
                <el-form-item label="英文名" prop="englishname">
                  <el-tooltip
                    class="item"
                    effect="dark"
                    content="需唯一"
                    placement="right"
                  >
                    <el-input
                      v-model="ruleForm.englishname"
                      placeholder="请输入英文名称"
                      style="width:550px"
                    />
                  </el-tooltip>
                </el-form-item>
                <el-form-item label="图标" prop="icon">
                  <el-input
                    v-model="ruleForm.icon"
                    placeholder="请选择图标"
                    style="width:400px"
                  />
                  <el-button
                    plain
                    icon="el-icon-tickets"
                    style="margin-left:10px"
                    @click="iconclick"
                  >选择图标</el-button>
                </el-form-item>
                <el-form-item label="前端组件" prop="components">
                  <el-input
                    v-model="ruleForm.components"
                    placeholder="请输入前端组件"
                    style="width:400px"
                  />
                </el-form-item>
                <el-form-item label="排序值" prop="sort">
                  <el-tooltip
                    class="item"
                    effect="dark"
                    content="值越大越靠前"
                    placement="right"
                  >
                    <el-input-number
                      v-model="ruleForm.sort"
                      controls-position="right"
                      :min="0"
                      :max="10"
                      @change="handleChange"
                    />
                  </el-tooltip>
                </el-form-item>
                <!-- <el-form-item label="是否启用" prop="value">
                  <el-switch
                    v-model="ruleForm.value"
                    active-color="#409EFF"
                    inactive-color="#ff4949"
                    active-value="1"
                    inactive-value="0"
                    @change="ruleFormswitch"
                  />
                </el-form-item> -->
                <el-form-item
                  v-if="haschirld === true"
                  label="是否隐藏"
                  prop="showvalue"
                >
                  <el-switch
                    v-model="ruleForm.showvalue"
                    active-color="#ff4949"
                    inactive-color="#409EFF"
                    active-value="1"
                    inactive-value="0"
                    @change="showvalueswitch"
                  />
                </el-form-item>
                <el-form-item>
                  <el-button
                    type="primary"
                    icon="el-icon-edit"
                    :disabled="maindisable"
                    @click="submitForm('ruleForm')"
                  >修改并保存</el-button>
                  <el-button
                    plain
                    size="medium"
                    @click="resetForm('ruleForm')"
                  >重置</el-button>
                </el-form-item>
              </el-form>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-dialog :visible.sync="batchdeletionshow" width="30%">
      <div slot="title" class="header-title">
        <span
          style="color:#E6A23C;margin-right: 5px;"
        ><i
          class="el-icon-question"
        /></span>
        <span class="title-age">确认删除?</span>
      </div>
      <span>您确定删除所选的 {{ deletearr.length }} 条数据及其下级所有数据？</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="batchdeletionshow = false">取 消</el-button>
        <el-button type="primary" @click="deleteall">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 选择图标 -->
    <el-dialog title="选择图标" :visible.sync="iconshow">
      <div class="iconlistbox">
        <div
          v-for="(item, index) in svgIcons"
          :key="index"
          class="icon_item"
          @click="iconIsok(item)"
        >
          <!-- <i :class="item.icon" class="icon" />
          <div>{{ item.icon }}</div> -->
          <!-- <div slot="content">
            {{ generateIconCode(item) }}
          </div> -->
          <svg-icon :icon-class="item" class-name="disabled" />
          <span style="margin-top: 10px;">{{ item }}</span>
        </div>
      </div>
    </el-dialog>
    <!-- 添加子节点 -->
    <el-dialog
      title="添加子节点"
      :visible.sync="childnodeshow"
      class="childnodesbox"
    >
      <div class="childnodestitle">
        <span>上级节点:</span> <span>{{ ruleForm.name }}</span>
      </div>
      <div>
        <el-form
          ref="childnoderuleForm"
          :model="childnoderuleForm"
          :rules="childnoderules"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="名称" prop="name" style="width:400px">
            <el-tooltip
              class="item"
              effect="dark"
              content="名称不可重复"
              placement="right"
            >
              <el-input v-model="childnoderuleForm.name" />
            </el-tooltip>
          </el-form-item>
          <el-form-item label="英文名称" prop="enname" style="width:400px">
            <el-input v-model="childnoderuleForm.enname" />
          </el-form-item>
          <el-form-item label="路径" prop="url" style="width:400px">
            <el-tooltip
              class="item"
              effect="dark"
              content="填写后端请求URL，后端将作权限拦截，若无可填写'无'或其他"
              placement="right"
            >
              <el-input v-model="childnoderuleForm.url" />
            </el-tooltip>
          </el-form-item>
          <el-form-item label="图标" prop="icon">
            <el-input
              v-model="childnoderuleForm.icon"
              placeholder="请选择图标"
              style="width:200px"
            />
            <el-button
              plain
              icon="el-icon-tickets"
              style="margin-left:10px;"
              @click="iconclick"
            >选择图标</el-button>
          </el-form-item>
          <el-form-item label="前端组件" prop="compontent" style="width:400px">
            <el-tooltip
              class="item"
              effect="dark"
              content="填写后端请求URL，后端将作权限拦截，若无可填写'无'或其他"
              placement="right"
            >
              <el-input v-model="childnoderuleForm.compontent" />
            </el-tooltip>
          </el-form-item>
          <el-form-item label="排序值" prop="sort" style="width:400px">
            <el-tooltip
              class="item"
              effect="dark"
              content="值越大越靠前"
              placement="right"
            >
              <el-input-number
                v-model="childnoderuleForm.sort"
                controls-position="right"
                :min="0"
                :max="10"
                @change="childhandleChange"
              />
            </el-tooltip>
          </el-form-item>
          <!-- <el-form-item label="是否启用" prop="toenable">
            <el-switch
              v-model="childnoderuleForm.toenable"
              active-color="#409EFF"
              inactive-color="#ff4949"
              active-value="1"
              inactive-value="0"
              @change="childtoenable"
            />
          </el-form-item> -->
          <el-form-item label="是否隐藏" prop="showvalue">
            <el-switch
              v-model="childnoderuleForm.showvalue"
              active-color="#ff4949"
              inactive-color="#409EFF"
              active-value="1"
              inactive-value="0"
              @change="childsshowvalue"
            />
          </el-form-item>
        </el-form>
        <div
          slot="footer"
          class="dialog-footer"
          style="display: flex;justify-content: flex-end;"
        >
          <el-button
            @click="childnodeIsnno('childnoderuleForm')"
          >取 消</el-button>
          <el-button
            type="primary"
            @click="childnodeIsoK('childnoderuleForm')"
          >确 定</el-button>
        </div>
      </div>
    </el-dialog>
    <!-- 顶部添加 -->
    <el-dialog
      title="添加顶部菜单"
      :visible.sync="topnodeshow"
      class="topnodebox"
    >
      <div class="topnodetitle">
        <span>类型:</span>
        <span><i class="el-icon-info" style="color:#1E90FF" /> 顶部菜单</span>
      </div>
      <div>
        <el-form
          ref="topnoderuleForm"
          :model="topnoderuleForm"
          :rules="topnoderules"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="名称" prop="name" style="width:400px">
            <el-input v-model="topnoderuleForm.name" />
          </el-form-item>
          <el-form-item label="英文名" prop="englishname" style="width:400px">
            <el-input v-model="topnoderuleForm.englishname" />
          </el-form-item>
          <el-form-item label="路径" prop="path" style="width:400px">
            <el-input v-model="topnoderuleForm.path" />
          </el-form-item>
          <el-form-item label="图标" prop="icon">
            <el-input
              v-model="topnoderuleForm.icon"
              placeholder="请选择图标"
              style="width:400px"
            />
            <el-button
              plain
              icon="el-icon-tickets"
              style="margin-left:10px"
              @click="iconclick"
            >选择图标</el-button>
          </el-form-item>
          <el-form-item label="前端组件" prop="component" style="width:400px">
            <el-input v-model="topnoderuleForm.component" />
          </el-form-item>
          <el-form-item label="排序值" prop="sort" style="width:400px">
            <el-tooltip
              class="item"
              effect="dark"
              content="值越大越靠前"
              placement="right"
            >
              <el-input-number
                v-model="topnoderuleForm.sort"
                controls-position="right"
                :min="0"
                :max="10"
                @change="handleChange"
              />
            </el-tooltip>
          </el-form-item>
          <!-- <el-form-item label="是否启用" prop="toenable">
            <el-switch
              v-model="topnoderuleForm.toenable"
              active-color="#409EFF"
              inactive-color="#ff4949"
              active-value="1"
              inactive-value="0"
            />
          </el-form-item> -->
        </el-form>
        <div
          slot="footer"
          class="dialog-footer"
          style="display: flex;justify-content: flex-end;"
        >
          <el-button @click="topnodeIsno('topnoderuleForm')">取 消</el-button>
          <el-button
            type="primary"
            @click="topnodeIsok('topnoderuleForm')"
          >确 定</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import svgIcons from './svg-icons'
export default {
  name: 'PersonnelMenus',
  filters: {},
  data () {
    return {
      svgIcons,
      upperlevelmenu: true,
      maindisable: false,
      nowid: '',
      haschirld: false,
      topnodeshow: false, // 顶部节点
      childnodeshow: false, // 子节点show
      iconshow: false,
      deletearr: [],
      ruleForm: {
        id: '',
        parentId: '',
        uppermenu: '',
        path: '',
        name: '',
        englishname: '',
        icon: '',
        components: '', // 前端组件
        sort: '',
        // value: '0',
        showvalue: ''
      },
      rules: {
        uppermenu: [
          { required: true, message: '请选择上级菜单', trigger: 'change' }
        ],
        path: [{ required: true, message: '请输入路径', trigger: 'blur' }],
        name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
        englishname: [
          { required: true, message: '请输入英文名称', trigger: 'blur' },
          {
            pattern: /[a-zA-z]$/,
            message: '请输入正确的英文名称',
            trigger: 'blur'
          }
        ],
        icon: [
          { required: true, message: '图标不能为空', trigger: 'blur' },
          { pattern: /[^\d]/g, message: '请输入正确icon名称', trigger: 'blur' }
        ],
        components: [
          { required: true, message: '请输入前端组件', trigger: 'blur' },
          { pattern: /[^\d]/g, message: '请输入组件名称', trigger: 'blur' }
        ],
        sort: [],
        value: [],
        showvalue: []
      },
      childnoderuleForm: {
        parentstitle: '',
        enname: '',
        id: '',
        parentId: '',
        name: '',
        url: '/', // 路径
        compontent: '', // 前端组件
        icon: '',
        sort: '',
        // toenable: '0', // 是否启用
        showvalue: '' // 是否隐藏
      },
      childnoderules: {
        name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
        enname: [
          { required: true, message: '请输入英文名称', trigger: 'blur' },
          {
            pattern: /[a-zA-z]$/,
            message: '请输入正确的英文名称',
            trigger: 'blur'
          }
        ],
        icon: [
          { required: true, message: '图标不能为空', trigger: 'blur' },
          { pattern: /[^\d]/g, message: '请输入正确icon名称', trigger: 'blur' }
        ],
        url: [{ required: true, message: '请输入地址', trigger: 'blur' }],
        compontent: [
          { required: true, message: '请输入前端组件', trigger: 'blur' },
          { pattern: /[^\d]/g, message: '请输入组件名称', trigger: 'blur' }
        ],
        sort: [],
        // toenable: [],
        showvalue: []
      },
      topnoderuleForm: {
        parentId: '',
        name: '',
        englishname: '',
        path: '',
        icon: '',
        component: '',
        sort: ''
        // toenable: '0'
      },
      topnoderules: {
        name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
        englishname: [
          { required: true, message: '请输入英文名称', trigger: 'blur' },
          {
            pattern: /[a-zA-z]$/,
            message: '请输入正确的英文名称',
            trigger: 'blur'
          }
        ],
        path: [{ required: true, message: '请输入路径', trigger: 'blur' }],
        icon: [
          { required: true, message: '图标不能为空', trigger: 'blur' },
          { pattern: /[^\d]/g, message: '请输入正确icon名称', trigger: 'blur' }
        ],
        component: [
          { required: true, message: '组件不能为空', trigger: 'blur' },
          { pattern: /[^\d]/g, message: '请输入组件名称', trigger: 'blur' }
        ],
        sort: []
        // toenable: []
      },
      batchdeletionshow: false,
      treeloading: false,
      treeData: [],
      defaultall: false,
      submitarray: [],
      defaultProps: {
        children: 'children',
        label: 'title'
      },
      searchinput: '',
      options: [
        {
          value: '1',
          label: '刷新'
        },
        {
          value: '2',
          label: '收合所有'
        },
        {
          value: '3',
          label: '展开所有'
        }
      ],
      value: ''
    }
  },
  created () {
    this.getallList()
  },
  methods: {
    generateIconCode (symbol) {
      return `<svg-icon icon-class="${symbol}" />`
    },
    // 批量删除
    deleteall () {
      this.$Http.deletearr(this.deletearr)
        .then(res => {
          if (res.code === 200) {
            this.batchdeletionshow = false
            this.$message({
              message: res.message,
              type: 'success'
            })
            this.childnodeshow = false
            this.childnoderuleForm.parentId = ''
            this.childnoderuleForm.url = ''
            this.childnoderuleForm.enname = '' // 路由英文名
            this.childnoderuleForm.name = ''
            this.childnoderuleForm.icon = ''
            this.childnoderuleForm.compontent = '' // 前端组件
            this.childnoderuleForm.sort = ''
            // this.childnoderuleForm.toenable = '0'
            this.childnoderuleForm.showvalue = ''
            this.getallList()
          } else {
            this.batchdeletionshow = false
            this.$message({
              message: res.message,
              type: 'error'
            })
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    // 选择父级
    popoverchlick (v) {
      if (v.id === this.nowid) {
        this.$message({
          message: '不能选择自己作为父级',
          type: 'error'
        })
      } else {
        this.ruleForm.uppermenu = v.title
        this.ruleForm.parentId = v.id
      }
    },
    // 添加子节点按钮
    addchildnode () {
      if (this.ruleForm.name === '') {
        this.$message({
          message: '请先选择父级!',
          type: 'error',
          duration: 2000
        })
      } else {
        this.childnodeshow = true
      }
    },
    // 添加顶部菜单取消
    topnodeIsno (formName) {
      this.$refs[formName].resetFields()
      this.topnodeshow = false
    },
    // 添加顶部菜单确定
    topnodeIsok (formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          const topndobj = {
            parentId: this.topnoderuleForm.parentId,
            path: this.topnoderuleForm.path,
            name: this.topnoderuleForm.englishname, // 路由英文名
            title: this.topnoderuleForm.name,
            icon: this.topnoderuleForm.icon,
            component: this.topnoderuleForm.component, // 前端组件
            sortOrder: this.topnoderuleForm.sort
            // showAlways: this.topnoderuleForm.toenable,

          }
          this.$Http.addsave(topndobj).then(res => {
              if (res.code === 200) {
                this.$message({
                  message: res.messgae,
                  type: 'success'
                })
                this.topnodeshow = false
                this.topnoderuleForm.parentId = ''
                this.topnoderuleForm.path = ''
                this.topnoderuleForm.englishname = '' // 路由英文名
                this.topnoderuleForm.name = ''
                this.topnoderuleForm.icon = ''
                this.topnoderuleForm.component = '' // 前端组件
                this.topnoderuleForm.sort = ''
                // this.topnoderuleForm.toenable = '0'

                this.getallList()
              } else {
                this.$message({
                  message: res.message,
                  type: 'error'
                })
                this.childnodeshow = false
              }
            }).catch(err => {
              console.log(err)
              this.$message({
                message: '新增失败!',
                type: 'error'
              })
              this.childnodeshow = false
            })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    // 添加子组件取消
    childnodeIsnno (formName) {
      this.$refs[formName].resetFields()
      this.childnodeshow = false
    },
    // 添加子组件确定
    childnodeIsoK (formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          const childobj = {
            parentId: this.childnoderuleForm.parentId,
            path: this.childnoderuleForm.url,
            name: this.childnoderuleForm.enname, // 路由英文名
            title: this.childnoderuleForm.name,
            icon: this.childnoderuleForm.icon,
            component: this.childnoderuleForm.compontent, // 前端组件
            sortOrder: this.childnoderuleForm.sort,
            // showAlways: this.childnoderuleForm.toenable,
            hidden: this.childnoderuleForm.showvalue
          }
          this.$Http.addsave(childobj)
            .then(res => {
              if (res.code === 200) {
                this.$message({
                  message: res.messgae,
                  type: 'success'
                })
                this.childnodeshow = false
                this.childnoderuleForm.parentId = ''
                this.childnoderuleForm.url = ''
                this.childnoderuleForm.enname = '' // 路由英文名
                this.childnoderuleForm.name = ''
                this.childnoderuleForm.icon = ''
                this.childnoderuleForm.compontent = '' // 前端组件
                this.childnoderuleForm.sort = ''
                // this.childnoderuleForm.toenable = '0'
                this.childnoderuleForm.showvalue = ''

                this.getallList()
              } else {
                this.$message({
                  message: res.message,
                  type: 'error'
                })
                this.childnodeshow = false
              }
            })
            .catch(err => {
              console.log(err)
              this.$message({
                message: err,
                type: 'error'
              })
              this.childnodeshow = false
            })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    // 图标点击
    iconIsok (icon) {
      if (this.topnodeshow !== true && this.childnodeshow !== true) {
        this.ruleForm.icon = icon
      } else if (this.topnodeshow !== true) {
        this.childnoderuleForm.icon = icon
      } else {
        this.topnoderuleForm.icon = icon
      }
      this.iconshow = false
    },
    // 主菜单提交
    submitForm (formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          const obj = {
            id: this.ruleForm.id,
            parentId: this.ruleForm.parentId,
            path: this.ruleForm.path,
            name: this.ruleForm.englishname, // 路由英文名
            title: this.ruleForm.name,
            icon: this.ruleForm.icon,
            component: this.ruleForm.components, // 前端组件
            sortOrder: this.ruleForm.sort,
            // showAlways: this.ruleForm.value,
            hidden: this.ruleForm.showvalue
          }
          this.maindisable = true
          this.$Http.changgesave(obj)
            .then(res => {
              if (res.code === 200) {
                this.$message({
                  message: '设置成功,查看更新需退出重新登录!',
                  type: 'success',
                  duration: 3000
                })
                setTimeout(() => {
                  this.maindisable = false
                }, 2000)
              } else {
                this.$message({
                  message: res.message,
                  type: 'error',
                  duration: 3000
                })
                setTimeout(() => {
                  this.maindisable = false
                }, 2000)
              }
            })
            .catch(err => {
              console.log(err)
              this.maindisable = false
            })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    // 主菜单是否启用
    ruleFormswitch (e) {
      this.ruleForm.value = e
    },
    // 是否隐藏
    showvalueswitch (e) {
      console.log('eeeeeeeeeee', e)
      this.ruleForm.showvalue = e
    },
    // 添加子菜单是否启用
    childtoenable (e) {
      this.childnoderuleForm.value = e
    },
    // 添加子菜单是否隐藏
    childsshowvalue (e) {
      this.childnoderuleForm.showvalue = e
    },
    // 重置表单
    resetForm (formName) {
      this.$refs[formName].resetFields()
    },
    // 取消选择编辑
    cancle () {
      this.ruleForm.id = ''
      this.ruleForm.parentId = ''
      this.ruleForm.uppermenu = ''
      this.ruleForm.path = ''
      this.ruleForm.routerenglish = ''
      this.ruleForm.components = ''
      this.ruleForm.name = ''
      this.ruleForm.englishname = ''
      this.ruleForm.icon = ''
      this.ruleForm.sort = ''
      // this.ruleForm.value = '0'
      this.ruleForm.showvalue = ''
    },
    // 选择图标
    iconclick () {
      this.iconshow = true
    },
    // 计数器
    handleChange (value) {
      this.ruleForm.sort.value
    },
    // 添加子菜单计数器
    childhandleChange (value) {
      this.childnoderuleForm.sort.value
    },
    // 批量删除
    batchdeletion () {
      if (this.submitarray.length === 0) {
        this.$message({
          message: '请先勾选删除项!',
          type: 'error',
          duration: 2000
        })
      } else {
        this.batchdeletionshow = true
      }
    },
    // 下拉点击
    clickcommand (item) {
      // 刷新
      if (item.value === '1') {
        this.treeloading = true
        this.$Http.getAllMenuList()
          .then(res => {
            if (res.code === 200) {
              setTimeout(() => {
                this.treeloading = false
                this.treeData = res.result
              }, 2000)
            } else {
              this.$message({
                message: res.message,
                type: 'error'
              })
            }
          })
          .catch(err => {
            console.log('err', err)
          })
      } else if (item.value === '2') {
        this.close(this.treeData)
      } else if (item.value === '3') {
        this.open(this.treeData)
      }
    },
    // 展开
    open (data) {
      var self = this

      data.forEach(el => {
        self.$refs.mytree.store.nodesMap[el.id].expanded = true
        el.children && el.children.length > 0 ? self.open(el.children) : '' // 子级递归
      })
    },
    // 合上
    close (data) {
      var self = this
      data.forEach(el => {
        self.$refs.mytree.store.nodesMap[el.id].expanded = false
        el.children && el.children.length > 0 ? self.close(el.children) : '' // 子级递归
      })
    },
    handleCheckChange (handleCheckChange, checked) {
      // checkedKeys 所选节点id数组、
      // checkedNodes 所选节点属性数组
      // halfCheckedKeys 半选节点数组、
      // halfCheckedNodes 半选节点属性数组，可自行获取所需要的值
      this.submitarray = []
      this.deletearr = checked.checkedKeys
      this.submitarray = this.submitarray.concat(
        checked.checkedKeys,
        checked.halfCheckedKeys
      )
    },
    // 左面属性点击每项
    handleNodeClick (item) {
      console.log('item', item)
      this.nowid = item.id
      this.childnoderuleForm.parentId = item.id

      if (item.children.length > 0) {
        this.haschirld = false
      } else {
        this.haschirld = true
      }
      if (item.prentName === null) {
        this.upperlevelmenu = false
      } else {
        this.upperlevelmenu = true
      }

      if (item.label === this.ruleForm.name) {
        this.ruleForm.id = ''
        this.ruleForm.parentId = ''
        this.ruleForm.uppermenu = ''
        this.ruleForm.path = ''
        this.ruleForm.routerenglish = ''
        this.ruleForm.components = ''
        this.ruleForm.name = ''
        this.ruleForm.englishname = ''
        this.ruleForm.icon = ''
        this.ruleForm.sort = ''
        // this.ruleForm.value = true
        this.ruleForm.showvalue = ''
      } else {
        this.ruleForm.id = item.id
        this.ruleForm.parentId = item.parentId
        this.ruleForm.uppermenu = item.prentName
        this.ruleForm.path = item.path
        this.ruleForm.routerenglish = item.name
        this.ruleForm.name = item.title
        this.ruleForm.englishname = item.name
        this.ruleForm.icon = item.icon
        this.ruleForm.components = item.component
        this.ruleForm.sort = item.sortOrder
        // this.ruleForm.value = item.showAlways
        this.ruleForm.showvalue = item.hidden ? '1' : '0'
      }
    },
    async getallList () {
      try {
        const res = await this.$Http.getAllMenuList()
      if (res.code === 200) {
        this.treeData = res.result
      } else {
        this.$message({
          type: 'error',
          message: res.message
        })
      }
      } catch (err) {
        console.log('err', err)
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.treebox {
  padding: 10px 10px 0 10px;

  .iconlistbox {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    .icon_item {
      flex: 20%;
      text-align: center;
      margin: 0 20px 20px 20px;
      width: 50px;
      height: 50px;
      display: flex;
      flex-direction: column;
      align-items: center;
      .icon {
        margin-bottom: 20px;
        font-size: 32px;
        font-weight: 400;
      }
    }
    .icon_item:hover {
      color: #409eff;
    }
  }
  .topnodebox {
    padding: 20px;
    box-sizing: border-box;
    .topnodetitle {
      margin-bottom: 30px;
      margin-left: 30px;
    }
  }
  .childnodesbox {
    padding: 20px;
    box-sizing: border-box;
    .childnodestitle {
      margin-bottom: 30px;
      margin-left: 30px;
    }
  }
  .rowbox {
    margin-top: 20px;
    .bottom_left {
      .titlebg {
        padding: 8px;
        box-sizing: border-box;
        border-radius: 3px;
        width: 100%;
        border: 1px solid #abdcff;
        background: #f0faff;
        color: #515a6e;
        display: flex;
        align-items: center;
        font-size: 14px;
        vertical-align: middle;
        margin-bottom: 10px;
        .text {
          margin-left: 5px;
          margin-right: 8px;
        }
      }
      .tree {
        margin-top: 10px;
      }
    }
  }

  .el-row {
    margin-bottom: 20px;

    &:last-child {
      margin-bottom: 0;
    }
  }

  .el-col {
    border-radius: 4px;
  }

  .bg-purple-light {
    margin-left: 20px;
    background: #fff;

    .formbox {
      padding: 15px;
      box-sizing: border-box;
      flex-flow: column;
      display: flex;

      .itemtype {
        margin-bottom: 24px;
        vertical-align: top;
      }
    }
  }

  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
}
</style>
